<template>
  <div class="container">
    <title-header title-name="抢糖果记录"/>
    <div class="btn_list">
      <div v-for="(item, index) in btnList" :class="{ active: item.active }" :key="index"
           @click="btnClick(index, item.type)">
        {{ item.name }}
      </div>
    </div>
    <div class="search mb-3">
      <div class="flex flex-col w-3/4">
        <div class="flex items-center mb-3">
          <span class="mr-3">按开始时间搜索</span>
          <el-date-picker
            class="mr-3"
            style="margin-right: 8px; width: 19%"
            v-model="searchItem.create_start_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始">
          </el-date-picker>
          <span class="mr-3">- </span>
          <el-date-picker
            class="mr-3"
            style="margin-right: 8px; width: 19%"
            v-model="searchItem.create_end_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束">
          </el-date-picker>
        </div>
        <div class="flex items-center">
          <span class="mr-3">按结束时间搜索</span>
          <el-date-picker
            class="mr-3"
            style="margin-right: 8px; width: 19%"
            v-model="searchItem.finish_start_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始">
          </el-date-picker>
          <span class="mr-3">- </span>
          <el-date-picker
            class="mr-3"
            style="margin-right: 8px; width: 19%"
            v-model="searchItem.finish_end_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束">
          </el-date-picker>
          <el-input v-model="searchItem.game_sn"
                    style="width: 16%" placeholder="请输入期数">
          </el-input>
        </div>
      </div>
      <div class="search_btn">
        <el-button type="primary" size="small" @click="searchClick">查询</el-button>
        <el-button type="primary" size="small" @click="resetClick">重置</el-button>
      </div>
    </div>
    <div class="table_data">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="game_sn" label="期数" width="200"></el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="200"></el-table-column>
        <el-table-column prop="end_time" label="结束时间" width="200"></el-table-column>
        <el-table-column prop="rule" label="接龙规则" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.rule ? '最大接龙': '最小接龙' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="join_num" label="人数" width="100"></el-table-column>
        <el-table-column prop="gift_num" label="糖果数" width="100"></el-table-column>
        <el-table-column prop="cost" label="保证金" width="150"></el-table-column>
        <el-table-column prop="join_num" label="状态" width="180">
          <template slot-scope="scope">
            <span>{{ statusChang(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="join_num"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="primary" @click="detailClick(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageList.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageList.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageList.total">
      </el-pagination>
    </div>
    <el-dialog
      title="详情"
      :visible.sync="modalDetail.dialogVisible"
      width="30%">
      <div class="detail">
        <div class="detail_top">
          <div>
            <span>期数</span>
            <span>{{ modalDetail.detail.game_sn }}</span>
          </div>
          <div>
            <span>期数</span>
            <span>{{ modalDetail.detail.rule ? '最小接龙' : '最大接龙' }}</span>
          </div>
          <div>
            <span>人数</span>
            <span>{{ modalDetail.detail.join_num }}</span>
          </div>
          <div>
            <span>糖果数</span>
            <span>{{ modalDetail.detail.gift_num }}</span>
          </div>
          <div>
            <span>保证金</span>
            <span>{{ modalDetail.detail.cost }}</span>
          </div>
          <div>
            <span>状态</span>
            <span>{{ statusChang(modalDetail.detail.status) }}</span>
          </div>
        </div>
        <div class="detail_bottom" v-for="item in modalDetail.detail.users" :key="item.user_id">
          <div>
            <span>用户ID</span>
            <span>{{ item.user_id }}</span>
          </div>
          <div>
            <span>用户昵称</span>
            <span>{{ item.nickname }}</span>
          </div>
          <div>
            <span>获得糖果数</span>
            <span>{{ item.get_num }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 子组件 标题头
import titleHeader from "../grabCandyConfig/childComps/titleHeader";
// 网络请求
import { listData, detailDataAPI } from '@/api/gradCandy/gradCandy'

export default {
  name: "gradCandyRecord",
  components: {
    titleHeader
  },
  data() {
    return {
      btnList: [
        {
          name: '新秀赛',
          active: true,
          type: 1
        },
        {
          name: '大侠赛',
          active: false,
          type: 2
        },
        {
          name: '盟主赛',
          active: false,
          type: 3
        },
      ],
      searchItem: {
        create_start_time: null,
        create_end_time: null,
        finish_start_time: null,
        finish_end_time: null,
        game_sn: null
      },
      searchTerm: {},
      loading: false,
      tableData: [],
      pageList: {
        page: 1,
        total: 200,
        per_page: 10
      },
      // 当前所处在的赛 1新手, 2大侠, 3盟主
      type: 1,
      modalDetail: {
        dialogVisible: false,
        detail: []
      }
    }
  },
  created() {
    this.listData()
  },
  methods: {
    // 网络请求
    async listData(type = 1, page = 1, per_page = 10, search = this.searchTerm) {
      this.loading = true
      const detail = await listData({ page, type, per_page, ...search
      })
      if (detail.code === 200) {
        this.tableData = detail.data.data
        // 处理页码
        this.pageList.page = detail.data.current_page
        this.pageList.total = detail.data.total
        this.loading = false
      }
    },
    // 点击事件
    /**
     * btnClick
     * @param index 当前按钮点击的索引
     */
    btnClick(index, type) {
      this.btnList.map(item => item.active = false)
      this.$set(this.btnList[index], 'active', true)
      this.type = type
      this.resetClick()
      // this.listData(type)
    },
    /**
     * searchClick
     * @desc 搜索按钮发生点击
     */
    searchClick() {
      for (const argumentsKey in this.searchItem) {
        if (argumentsKey !== 'game_sn' && this.searchItem[argumentsKey]) {
          this.searchTerm[argumentsKey] = new Date(this.searchItem[argumentsKey]).getTime() / 1000
        } else {
          this.searchTerm[argumentsKey] = this.searchItem[argumentsKey]
        }
      }

      this.listData(this.type, this.pageList.page, this.pageList.per_page, this.searchTerm)
    },
    /**
     * resetClick
     * @desc 重置按钮发生点击
     */
    resetClick() {
      for (const argumentsKey in this.searchItem) {
        this.$set(this.searchItem, argumentsKey, null)
      }
      for (const argumentsKey in this.searchTerm) {
        this.$set(this.searchTerm, argumentsKey, null)
      }
      // 当前是哪一种赛
      let type = null
      this.listData(this.type)
    },
    /**
     * detailClick
     * @desc 详情按钮发生点击
     * @param type 游戏id
     */
    async detailClick(id) {
      const detail = await detailDataAPI({ id: id })

      if (detail.code === 200) {
        this.modalDetail.detail = detail.data
        this.modalDetail.dialogVisible = true
      }
    },
    // 分页事件
    handleSizeChange(val) {
      // `每页 ${val} 条`);
      this.pageList.per_page = val
      this.listData(this.type, this.pageList.page, this.pageList.per_page)
    },
    handleCurrentChange(val) {
      // `当前页: ${val}`);
      this.pageList.page = val
      this.listData(this.type, this.pageList.page, this.pageList.per_page)
    },
    /**
     * statusChang
     * @param status 状态 -2.后台关闭自动结束, -1异常人满未结束 0.准备中 1进行中 2结束
     */
    statusChang(status) {
      switch (status) {
        case -2:
          return '后台关闭自动结束'
        case -1:
          return '后台关闭自动结束'
        case 0:
          return '准备中'
        case 1:
          return '进行中'
        case 2:
          return '结束'
      }
    },
    dateFormat (date, format) {
      date = new Date(date);
      date.setHours(date.getHours());
      let o = {
        'M+' : date.getMonth() + 1, //month
        'd+' : date.getDate(), //day
        'H+' : date.getHours(), //hour
        'm+' : date.getMinutes(), //minute
        's+' : date.getSeconds(), //second
        'q+' : Math.floor((date.getMonth() + 3) / 3), //quarter
        'S' : date.getMilliseconds() //millisecond
      };

      if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      for (let k in o)
        if (new RegExp('(' + k + ')').test(format)){
          format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        }
      return format;
    }
  }
}
</script>

<style scoped lang="scss">

@import "index";

</style>
